Ext.define('FC.controller.Countries', {
			extend : 'Ext.app.Controller',

			//define the stores
			stores : ['FancyCountries'],
			//define the models
			models : ['Country'],
			//define the views
			views : ['FancyCountrySearch'],
			
			init : function() {
				this.control({
					
					'viewport' : {
						render : this.onPanelRendered
					},
					//When the ComboBox is selected
					'fancyCountrySearch' : {
						select : this.onCountrySelect
					}
					
				});
			},

			onPanelRendered : function() {
				//just a console log to show when the panel si rendered
				//console.log('The panel was rendered');
			},
			
			onCountrySelect : function(obj, records) {
				//console.log('country was selected in the ComboBox');
				
				//if you set the ComboxBox to multiselect then the values will 
				//separated by the delimiter (default delimiter is a comma)
				Ext.MessageBox.alert('Selected Country', obj.getValue());
				
				//If you need access to other values in the store record based
				//on your selection in the ComboBox then loop thru the records
				Ext.each(records, function(eachCountry){
					//console.log(eachCountry);
					Ext.MessageBox.alert('Selected Country', 
					'Country Code: ' + eachCountry.data.code + '<br/>' +
					'Country Name: ' + eachCountry.data.name
					);
				})
			}
			
	});